<template>
  <div id="PieChart" class="echarts" style="width: 500px; height: 350px"></div>
</template>

<script setup lang="ts">
import { ECharts, EChartsOption, init } from "echarts";
interface ChartProp {
  value: string;
  name: string;
}
const initChart = (data: any): ECharts => {
  const charEle = document.getElementById("PieChart") as HTMLElement;
  const charEch: ECharts = init(charEle);
  /* echarts colors */
  const colors = ["#2CD9C5", "#505D6F", "#826AF9", "#FFE700", "#2D99FF"];
  const option: EChartsOption = {
    color: colors,
    title: {
      text: "完课率",
      bottom: "8%",
      left: "center",
      textStyle: {
        color: "#333",
        fontWeight: 600,
        fontSize: 16,
      },
    },
    tooltip: {
      show: false,
      trigger: "item",
    },
    legend: {
      show: false,
      top: "5%",
      left: "center",
    },
    graphic: {
      type: "text",
      left: "center",
      bottom: "50%",
      style: {
        text: `${data[0].value}%`,
        fill: "#ff6905",
        width: 30,
        height: 30,
        fontSize: 24,
        fontWeight: 600,
      },
    },
    series: [
      {
        name: "完课率",
        type: "pie",
        radius: ["40%", "70%"],
        center: ["center", "45%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: "#fff",
          borderWidth: 2,
        },
        label: {
          show: false,
          position: "center",
        },
        labelLine: {
          show: false,
        },
        data: data,
      },
    ],
  };
  charEch.setOption(option);
  return charEch;
};
defineExpose({
  initChart,
});
</script>
<style lang="scss" scoped>
.echarts {
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
</style>
